<template>
  <div>
    <input placeholder="输入关键字搜索" v-model.trim="searchFor">
    <table class="my-table">
      <thead>
        <tr>
          <th>就诊日期</th>
          <th>医生姓名</th>
          <th>诊断结果</th>
          <th>处方信息</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <VisitRecord 
          v-for="item in (list2.length ? list2 : list)"
          :key="item.id"
          :usertime="item.userTime"
          :doctorname="item.doctorName"
          :diagnostic="item.diagNostic"
          :prescription="item.prescriPtion"
          :details="item.detAils"
        ></VisitRecord>
      </tbody>
    </table>
  </div>
</template>

<script>
import VisitRecord from "./components/Hm.vue";

export default {
  components: {
    VisitRecord,
  },

  data () {
    return {
      list2 : [],
      list: [
        {
          id: 1,
          userTime: '2020-12-12',
          doctorName: '章三',
          diagNostic: '健康',
          prescriPtion: '止痛药',
          detAils: '详情',
        },
        {
          id: 2,
          userTime: '2023-12-12',
          doctorName: '李四',
          diagNostic: '感冒',
          prescriPtion: '感冒药',
          detAils: '详情',
        },
        {
          id: 3,
          userTime: '2020-12-12',
          doctorName: 'ikun',
          diagNostic: '基病',
          prescriPtion: '杀鸡药',
          detAils: '详情',
        },
        {
          id: 4,
          userTime: '2020-12-12',
          doctorName: '川普',
          diagNostic: '头痛',
          prescriPtion: '止痛药',
          detAils: '详情',
        },
      ],
      searchFor: '',
    }
  },

  watch: {
    searchFor(newvalue) {
        this.list2 = this.list.filter((item) => {
          for(let k in item) {
            if(item[k] === newvalue) {
              return item
            }
          }
        })
    }
  },
}
</script>


<style>
  .my-table {
    border-collapse: collapse;
    width: 100%;
  }

  .my-table td, .my-table th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }

  .my-table th {
    background-color: #f2f2f2;
  }
</style>
